<template>
    <div class="divBox">
      <el-card class="box-card boxCard" shadow="hover" :body-style="{ paddingBottom: 0, borderBottom: 0 }">
        <el-form ref="formValidate" v-loading="fullscreenLoading" :rules="ruleValidate" :model="formValidate" size="small" class="formValidate mt20" label-width="120px" @submit.native.prevent>
          <!--添加活动【start】-->
          <el-row :gutter="24">
            <el-col v-bind="grid2">
              <el-form-item label="活动名称：" prop="name">
                <el-input v-model="formValidate.name" :disabled="isDisabled" maxlength="249" placeholder="请输入活动名称" />
              </el-form-item>
            </el-col>
            <el-col v-bind="grid2">
              <el-form-item label="活动链接：" prop="urlLink">
                <el-input v-model="formValidate.urlLink" :disabled="isDisabled" placeholder="请输入活动链接" />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="开始时间：" prop="timeValue">
                <el-date-picker
                  v-model="timeValue"
                  type="datetimerange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期">
                </el-date-picker>
              </el-form-item>
            </el-col>
          <el-col :span="24">
              <el-form-item label="登录界面图片：" prop="image_Login">
              <UploadImg :height="imgSize" :width="imgSize" 
              :guId="guId" :isChangeUpload="true" :type="7" :limit_size="1" 
              :bigBox="true" :newImg="formValidate.image_Login" @change="imageLoginChange" 
              ></UploadImg>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="活动封面图：" prop="image">
              <UploadImg :height="imgSize" :width="imgSize" 
              :guId="guId" :isChangeUpload="true" :type="7" :limit_size="1" 
              :bigBox="true" :newImg="formValidate.image" @change="imageChange" 
              ></UploadImg>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="商品轮播图：" prop="sliderImage">
              <UploadImg :height="imgSize" :width="imgSize" 
              :guId="guId" :isChangeUpload="true" :type="7" :limit_size="6" 
              :bigBox="true" :newImg="formValidate.sliderImage" @change="sliderImageChange" :isMultiple="true"
              ></UploadImg>
            </el-form-item>
          </el-col>
        <el-col :span="24">
            <el-form-item label="视频上传" prop="videos">
              <UploadVideo :guId="guId" :type="8" @change="videosChange" :newVideo="formValidate.videos"></UploadVideo>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="活动简介：" prop="description">
              <el-input v-model="formValidate.description" :disabled="isDisabled" type="textarea" maxlength="250" :rows="3" placeholder="请输入简介描述" />
            </el-form-item>
          </el-col>
            <el-col :span="24">
            <el-form-item label="活动详情：" prop="content">
              <el-input v-model="formValidate.content" type="textarea" maxlength="250" :rows="3" placeholder="请输入详情描述" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="规则：" prop="rule">
              <el-input v-model="formValidate.rule" :disabled="isDisabled" type="textarea" maxlength="250" :rows="3" placeholder="请输入规则描述" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="是否显示活动：" props="isShow" class="specType">
              <el-radio-group v-model="formValidate.isShow">
                <el-radio :label="1" class="radio">显示</el-radio>
                <el-radio :label="0">不显示</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          </el-row>
          <!--添加活动【end】-->
          <el-form-item>
            <el-button type="primary" class="submission subCurLeft" @click="handleSubmit">提交</el-button>
          </el-form-item>
        </el-form>
      </el-card>
    </div>
  </template>
  
<script>
import { fileImageApi } from "@/api/oss";
import { CreationActivitieApi, getActivitieIdApi,UpdateActivitieApi } from "@/api/activity";
import { mapGetters } from "vuex";
import UploadVideo from "@/components/uploadVideo/index.vue";
export default {
  name: "Activity",
  components: {
    UploadVideo,
  },
  data() {
    return {
      imgSize: "60px",
      guId: "00000000-0000-0000-0000-000000000000",
      timeValue: [],
      routeId: "",
      // 双行
      grid2: {
        xl: 10,
        lg: 12,
        md: 12,
        sm: 24,
        xs: 24,
      },
      // 单行
      grid: {
        xl: 8,
        lg: 8,
        md: 8,
        sm: 12,
        xs: 24,
      },
      fileList: [],
      isDisabled: this.$route.params.isDisabled === "1",
      // 全屏加载
      fullscreenLoading: false,
      // 表单
      formValidate: {
        IsShow: 1,
      },
      // 表单验证
      ruleValidate: {
        name: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
          {
            required: true,
            min: 0,
            max: 100,
            message: "活动名称最多为50个字符",
            trigger: "blur",
          },
        ],
        urlLink: [
          { required: true, message: "请输入活动链接", trigger: "blur" },
        ],
        description: [
          { required: true, message: "请输入活动简介", trigger: "blur" },
          {
            required: true,
            min: 0,
            max: 2000,
            message: "活动简介最多为1000个字符",
            trigger: "blur",
          },
        ],
        content: [
          { required: true, message: "请输入活动详情", trigger: "blur" },
          {
            required: true,
            min: 0,
            max: 2000,
            message: "活动详情最多为1000个字符",
            trigger: "blur",
          },
        ],
        rule: [
          { required: true, message: "请输入活动规则", trigger: "blur" },
          {
            required: true,
            min: 0,
            max: 2000,
            message: "活动规则最多为1000个字符",
            trigger: "blur",
          },
        ],
        image: [
          {
            // required: true,
            message: "请上传活动封面图",
            trigger: "blur",
          },
        ],
        image_Login: [
          {
            // required: true,
            message: "请上传登录界面封面图片",
            trigger: "blur",
          },
        ],
        videos: [
          {
            // required: true,
            message: "请上传活动视频",
            trigger: "blur",
          },
        ],
        sliderImages: [
          {
            // required: true,
            message: "请选择活动轮播图",
            trigger: "blur",
          },
        ],
        IsShow: [
          {
            required: true,
            message: "请选择是否展示活动",
            trigger: "blur",
          },
        ]
      },
    };
  },
  watch: {
    timeValue(newVal, oldVal) {
      // 检查newVal是否为非空数组
      if (Array.isArray(newVal) && newVal.length > 0) {
        // 检查数组的第一个元素是否是Date对象
        if (newVal[0] instanceof Date) {
          this.formValidate.timeValue = newVal;
          this.formValidate.startDateUTC = this.startDateUTC;
          this.formValidate.endDateUTC = this.endDateUTC;
        } else {
          console.log("不需要转换");
        }
      } else {
        console.log("不需要转换0");
        this.formValidate.startDateUTC = "";
        this.formValidate.endDateUTC = "";
      }
    },
  },
  computed: {
    ...mapGetters(["customRouter"]),
    startDateUTC() {
      return this.timeValue[0] ? this.timeValue[0].toISOString() : null;
    },
    endDateUTC() {
      return this.timeValue[1] ? this.timeValue[1].toISOString() : null;
    },
  },
  mounted() {
    this.routeId = this.$route.query.id;
    if (this.routeId) {
      getActivitieIdApi(this.routeId)
        .then((res) => {
          console.log("提交res", res);
          this.formValidate = res;
          let time = [];
          time[0] = res.startDateUTC;
          time[1] = res.endDateUTC;
          this.timeValue = time;
          console.log("this.formValidate.this.timeValue", this.timeValue);
          this.$message.success("信息获取成功!");
        })
        .catch(() => {});
    }
  },
  methods: {
    //登陆图片
    imageLoginChange(data) {
      this.formValidate.image_Login = data;
      console.log("登陆图片:", data);
    },
    //轮播图片
    sliderImageChange(data) {
      this.formValidate.sliderImage = data;
      console.log("轮播图片:", data);
    },
    //封面图片
    imageChange(data) {
      this.formValidate.image = data;
      console.log("封面图片:", data);
    },
    //视频
    videosChange(data) {
      this.formValidate.videos = data;
      console.log("视频===:", data);
    },
    //是否显示
    onChangeSpec() {
      console.log(this.formValidate.IsShow);
    },
    // 时间设置
    getTimes() {},
    // 时间设置
    getImage(data) {
      // console.log("///////////////",data[0].path);
    },
    //提交
    handleSubmit() {
      const data = JSON.stringify(this.formValidate);
      console.log("data>>>", data);
      this.fullscreenLoading = true;
      this.$refs.formValidate.validate((valid) => {
        if (valid) {
          if(this.routeId != null){
            // 更新活动
            UpdateActivitieApi(data,this.routeId)
            .then((res) => {
              console.log("提交res", res);
              this.$message.success("更新成功!");
              this.fullscreenLoading = false;
              setTimeout(() => {
                this.$router.push({
                  path: `${this.customRouter}/activity/activity_list`,
                });
              }, 500);
            })
            .catch(() => {
              this.fullscreenLoading = false;
            });
          }else{
            // 添加活动
            CreationActivitieApi(data)
            .then((res) => {
              console.log("提交res", res);
              this.$message.success("新增成功!");
              this.fullscreenLoading = false;
              setTimeout(() => {
                this.$router.push({
                  path: `${this.customRouter}/activity/activity_list`,
                });
              }, 500);
            })
            .catch(() => {
              this.fullscreenLoading = false;
            });
          }
        } else {
          this.$message.error("请完善表单相关信息！");
          this.fullscreenLoading = false;
          return false;
        }
      });
    },
  },
};
</script>
  
<style lang="scss" scope>
.iframe {
  width: 344px;
  height: 644px;
  margin: 0 auto;
  border: 1px solid #eeeeee;
  border-radius: 40px;
  .title {
    width: 100%;
    height: 50px;
    line-height: 50px;
    font-size: 14px;
    text-align: center;
  }
  .content {
    height: 560px;
    overflow: hidden;
    overflow-x: hidden;
    padding: 0 20px;
    overflow-y: auto;
    img {
      max-width: 100%;
    }
  }
}
.choiceFormat {
  .el-select {
    .el-input {
      .el-input__inner {
        border-radius: 4px 0 0 4px !important;
      }
    }
  }
  .el-button[type="button"] {
    border-radius: 0 3px 3px 0 !important;
  }
}
.upLoadPicBox {
  .coverImg {
    width: 58px;
    height: 58px;
    cursor: pointer;
    img {
      width: 100%;
      height: 100%;
    }
  }
  &.cover-box {
    cursor: auto;
  }
}

.subCurLeft {
  margin-left: 0 !important;
}

.disLabelmoren {
  .el-form-item__label {
    width: auto !important;
    margin-left: 120px !important;
  }
}

.selWidth {
  width: 100%;
}
.selWidthd {
  width: 300px;
}
.specType {
  .el-form-item__content {
    line-height: 40px;
  }
}

.color-item {
  height: 30px;
  line-height: 30px;
  padding: 0 10px;
  color: #ffffff;
  margin-right: 10px;
}
.color-list {
  .color-item.blue {
    background-color: #1e9fff;
  }
  .color-item.yellow {
    background-color: rgb(254, 185, 0);
  }
  .color-item.green {
    background-color: #009688;
  }
  .color-item.red {
    background-color: #ed4014;
  }
}

.detail {
  .el-form-item__content {
    line-height: normal;
  }
}
.el-table {
  .cell {
    padding: 0 10px;
    .box {
      padding: 0 10px;
    }
  }
}

.tabNumWidth {
  ::v-deep .el-input-number--medium {
    width: 121px !important;
  }
  ::v-deep .el-input-number__increase {
    width: 20px !important;
    font-size: 12px !important;
  }
  ::v-deep .el-input-number__decrease {
    width: 20px !important;
    font-size: 12px !important;
  }
  ::v-deep .el-input-number--medium .el-input__inner {
    padding-left: 25px !important;
    padding-right: 25px !important;
  }
  ::v-deep thead {
    line-height: normal !important;
  }
  ::v-deep .el-table .cell {
    line-height: normal !important;
  }
}

.acea-row {
  .pictrue {
    width: 60px;
    height: 60px;
    border: 1px dotted rgba(0, 0, 0, 0.1);
    margin-right: 10px;
    position: relative;
    cursor: pointer;
    img {
      width: 100%;
      height: 100%;
    }
    .btndel {
      position: absolute;
      z-index: 1;
      left: 43px;
      top: -8px;
      font-size: 20px;
    }
  }
  .el-icon-circle-close {
    cursor: pointer;
  }
}

// 规格添加input框
.input-new-tag {
  width: 90px;
  margin-right: 10px;
  vertical-align: middle;
}

// 规格Tag样式
.type-tag {
  display: flex;
  align-items: center;
  .scopeType-tag-svg {
    cursor: move;
    svg {
      fill: red;
      font-size: 30px;
    }
  }
  .scopeType-tag {
    .rulesBox {
      display: flex;
      flex-wrap: wrap;
      align-items: self-start;
      .el-tag--light {
        cursor: move;
        padding-left: 30px;
        position: relative;
        &.el-tag--light::after {
          content: " ";
          display: block;
          width: 9px;
          height: 9px;
          border-radius: 50%;
          background-color: #2d8cf0;
          position: absolute;
          top: 8px;
          left: 10px;
        }
        .el-icon-close::before {
          margin-top: 1px;
          margin-right: 1px;
        }
      }
    }
    &.borderStyle {
      width: 90%;
      border: 1px solid #ccc;
      padding: 8px;
      border-radius: 4px;
    }
  }
}

// 处理input type = number的上下箭头
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}
input[type="number"] {
  -moz-appearance: textfield;
}

.boxCard {
  .el-card__header {
    padding-bottom: 0 !important;
    border-bottom: 0 !important;
  }
}
</style>
  